<template>
	<div>
	<el-form ref="startEndPanel" :model="form" label-width="110px" label="right">
	 <el-form-item label="节点ID:">
	   <el-input v-model="form.id"></el-input>
	 </el-form-item>
	 <el-form-item label="节点名称:">
	   <el-input v-model="form.name"></el-input>
	 </el-form-item>
	 <el-form-item label="节点描述:">
	   <el-input v-model="form.documentation"></el-input>
	 </el-form-item>
	  <el-form-item label="是否启用路由选择:" label-width=140px>
	    <el-switch v-model="form.choice" active-value="1" active-text="是" inactive-value="0" inactive-text="否">
	    </el-switch>
	  </el-form-item>	 
	 <el-form-item label="监听器:">
	 		  <el-badge :value="executionListenerLength">
	 			<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
	 		  </el-badge>
	 </el-form-item>
	 <el-form-item label="跳转条件:">
	   <el-input v-model="form.conditionExpression"></el-input>
	 </el-form-item>
	 <el-form-item label="跳转表达式:">
	   <el-input v-model="form.skipExpression"></el-input>
	 </el-form-item>
	</el-form>
	<executionListenerDialog
	v-if="dialogName === 'executionListenerDialog'"	
	:bpmnModel="bpmnModel"
	:element="element"
	@close="finishExecutionListener"
	></executionListenerDialog>
	</div>
</template>

<script>
	import {commonParse,conditionExpressionParse} from '../common/parseElement.js'
	import mixinPanel from '../mixins/mixinPanel.js'
	import mixinExecutionListener from '../mixins/mixinExecutionListener.js'
	export default{
		mixins:[mixinPanel,mixinExecutionListener],
		data(){
			return{
				form:{}
			}
		},
		created() {
			let cache = commonParse(this.element)
			cache = conditionExpressionParse(cache)
			this.form = cache
		},
		watch:{
			'form.conditionExpression':function(val){
				if (val) {
				  const newCondition = this.bpmnModel.get('moddle').create('bpmn:FormalExpression', { body: val })
				  this.updateProperties({ conditionExpression: newCondition })
				} else {
				  this.updateProperties({ conditionExpression: null })
				}
			},
			'form.skipExpression':function(val){
				if(val==='') val = null
				this.updateProperties({'flowable:skipExpression':val})
			},
			'form.choice':function(val){
				if(val==='') val = null
				const choiceXml = this.bpmnModel.get('moddle').create('flowable:IsCalcuSelectRouter', {
					value: val
				})
				const extensions =this.bpmnModel.get('moddle').create("bpmn:ExtensionElements",{values:[choiceXml]})
				this.updateProperties({ extensionElements: extensions })
			},
		}
		
	}
</script>

<style  >
	label {
		font-weight: initial !important;
	}
</style>
